@import "@common/style/common.styl";

.headerWrapper {
  height $header-height
  border-bottom 1px solid $border-color
}

.logo
  display block
  position absolute
  top 0
  left: 0
  width: 100px
  height: 56px
  background: url("@/assets/img/logo.png") center no-repeat
  background-size: contain;

.nav
  width 960px
  height: 100%
  margin 0 auto;

  .navItem
    line-height $header-height
    padding 0 15px
    font-size 17px
    color $header-font-color

    &.left
      float left

    &.right
      float right
      color: $header-font-grey

    &.active
      color $header-active-color

  .searchWrapper
    position: relative;
    float: left;
    .zoom {
      position: absolute;
      right: 5px;
      bottom: 4px;
      width: 30px;
      line-height: 30px;
      border-radius: 15px;
      text-align: center;
      &.focused {
        background: #777;
        color: #fff;
      }
    }
    .search
      width: 160px;
      height: 38px;
      padding: 0 30px 0 20px;
      margin-top: 9px;
      margin-left: 20px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      outline: none;
      border-radius: 19px;
      background: #eee;
      font-size: 14px;
      color: #666;
      &::placeholder {
        color: #999;
      }
      &.focused {
        width: 240px;
      }
      &.slideEnter {
        transition: all .2s ease-out;
      }
      &.slideEnterActive {
        width: 240px;
      }
      &.slideExit {
        transition: all .2s ease-out;
      }
      &.slideExitActive {
        width: 160px;
      }

    .iconfont
      &.focused
        background-color: #777;
        color #fff

    .searchInfo
      position: absolute;
      left 0
      top 56px
      width: 240px
      padding 0 20px
      box-shadow 0 0 2px 2px rgba(0,0,0,.2)
      background: #fff

    .searchInfoTitle
      margin-top: 20px;
      margin-bottom: 15px;
      line-height: 20px;
      font-size: 14px;
      color: #777;
      font-weight 620
      user-select none

    .searchInfoSwitch
      float right
      font-size 13px
      cursor pointer
      color #969696
      font-weight normal
      .spin
        display block
        float left
        font-size 12px
        margin-right: 2px
        transition all .2s ease-in
        transform-origin center center
      &:hover
        color #444

    .searchInfoList
      margin-bottom: 10px;
    .searchInfoItem
      display inline-block
      border 1px solid #ddd
      border-radius 1px
      color #787878
      font-size 14px
      padding 4px 3px
      margin 0 8px 6px 0
      cursor pointer
      &:hover
        color #444
        border-color #444

